<template>
  <div class="channel-edit">
    <!-- 我的频道----------------------------->
    <van-cell :border="false">
      <!-- 标题 -->
      <div slot="title" class="title-text">我的频道</div>
      <van-button
        class="edit-btn"
        type="danger"
        plain
        round
        size="mini"
        @click="isEdit = !isEdit"
      >
        {{ isEdit ? '编辑' : '完成' }}
      </van-button>
    </van-cell>
    <!-- 我的频道 - 宫格显示 频道项目 ------------->
    <van-grid class="my-grid" :gutter="10">
      <!-- 宫格项<van-icon name="clear" /> -->
      <van-grid-item
        @click="changeChannel(i, c)"
        :icon="goulu(c.id)"
        v-for="(c, i) in usrChannList"
        :key="c.id"
        :class="{ active: i === active }"
        :text="c.name"
      />
    </van-grid>

    <!-- 推荐频道---------------------------- -->
    <van-cell :border="false">
      <!-- 标题 -->
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>
    <!-- 推荐频道 - 宫格显示 频道项目 -->
    <van-grid class="recommend-grid" :gutter="10">
      <!-- 宫格项 -->
      <van-grid-item
        @click="addChannelToMy(i, c)"
        v-for="(c, i) in recommandList"
        :key="c.id"
        class="grid-item"
        :text="c.name"
        icon="plus"
      />
    </van-grid>
  </div>
</template>

<script>
// 导入 接口
import { getAllChannels, addChannel, removeChannel } from '@/api/channels.js'
//  导入 vuex中的 数据
import { mapState } from 'vuex'
// 自定义的 本地数据 方法
import { setItem } from '@/utils/storage.js'
// 创建一个 本地储存 位置
// const userChannel = 'user_Channel'
import { userChannel } from '@/config/localName.js'

export default {
  name: '',
  props: {
    // 登录用户频道列表
    usrChannList: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      // 固定 频道
      fixedChannelL: [0, 10, 12],
      recommandList: [],
      isEdit: true,
      isIcon: false
    }
  },
  // 钩子函数
  async created() {
    // a.获取 全部频道 ---------------------
    const { data: res } = await getAllChannels()
    // b.筛选出 推荐频道列表（不包含在 我的频道 中的剩余频道）
    this.recommandList = res.data.channels.filter(
      (e) => !this.usrChannList.some((e2) => e2.id === e.id)
    )
  },
  methods: {
    // 从我的 频道中 做一些功能选项
    async changeChannel(i, c) {
      // 删除数据中的 某一条数据 splice返回一个 删除的元素
      //  当 处于编辑状态的时候 才可以删除数据
      if (!this.isEdit) {
        // 不能删除掉 固定的 频道
        if (this.fixedChannelL.includes(c.id)) {
          return
        }
        if (i <= this.active) {
          // 将 点击的 数据 传入到 父组件 修改 active 以来改变 跳转后的 页面显示。并且曾active是一个高亮显示，由于数据互通的原因
          this.$emit('onChangeActive', this.active - 1)
        }
        this.usrChannList.splice(i, 1)
        this.recommandList.push(c)
        // 如果 没有登录 那么将 我的频道 储存到 本地数据
        if (this.user) {
          try {
            await removeChannel(c.id)
            this.$toast('移除频道')
          } catch (err) {
            this.$toast('移除频道失败')
          }
        } else {
          // 执行 未登录的 代码
          setItem(userChannel, this.usrChannList)
        }
      } else {
        this.$emit('onChangeActive', i, false)
      }
    },
    // 对于 删除 频道的操作
    goulu(ID) {
      return !this.isEdit && !this.fixedChannelL.includes(ID) ? 'clear' : ''
    },
    // 在推荐 频道中 添加到 我的频道
    async addChannelToMy(i, c) {
      // 处于编辑状态的时候 添加元素
      if (!this.isEdit) {
        this.recommandList.splice(i, 1)
        this.usrChannList.push(c)
        if (this.user) {
          console.log('这里这里~~~')
          // 如果 用户 登录了 那么 就将添加到 服务器中
          try {
            await addChannel({
              id: c.id, // 需要添加的 频道 id
              seq: this.usrChannList.length // 数据 序号
            })
            this.$toast('添加成功！')
          } catch (err) {
            this.$toast('添加失败！')
          }
        } else {
          console.log('zheli1zheli1')
          setItem(userChannel, this.usrChannList)
        }
      }
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
.channel-edit {
  padding: 87px 0;
  .title-text {
    font-size: 32px;
    color: #333;
  }
  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  /deep/.active .van-grid-item__text {
    color: red;
  }
  /deep/ .my-grid {
    .van-icon-clear {
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 15px;
      color: #cacaca;
      z-index: 2;
    }
  }
  /deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      white-space: nowrap;
      background-color: #f3f5f7;
      .van-grid-item__text {
        font-size: 28px;
        color: #222;
        margin-top: 0px;
      }
    }
  }

  /deep/ .recommend-grid {
    .grid-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
          margin-right: 6px;
        }
        .van-grid-item__text {
          margin-top: 0px;
        }
      }
    }
  }
}
</style>
